{% extends "base.html" %}

{% block content %}

<div id ="title-container"  class="clearboth">
    <h2>Projects</h2>
</div>

<span id="id_add_project" title="Add new Project"class="link">Add Project</span>

<div id="table-contain" class="ui-widget">
    <table  id="id_project_table" class="ui-widget ui-widget-content">
        <thead>
            <tr class="ui-state-default_ ui-widget-header ui-state-default_" >
                <th>Name</th>
                <th>Opened By</th>
                <th>Description</th>
            </tr>
        </thead>
        {% for project in projects %}
        <tbody>
            <tr>
                <td><a href="/iterations?project_id={{ project.key.id }}"> {{ project.name|escape }}</a></td>
                <td>{{ project.opened_by }}</td>
                <td>{{ project.description|escape }}</td>
            </tr>
        </tbody>
        {% endfor %}
    </table>
</div>

<h2>Users in Projects</h2>
<div id="story-contain" class="ui-widget">
    {% for project in projects %}
    <h3>{{project.name}}</h3>
    <table>
        <col width="47%" />
        <col width="6%" />
        <col width="47%" />
        <thead>
            <tr>
                {% with iteration.count_stories as total_stories %}
                <th>
                    <div class="col_label ui-widget-content ui-widget-header border_w ui-state-default _ui-corner-all ui-state-highlight_ ui-corner-all_">
                        <div class="column_title">
                            <span>Users in project</span>
                        </div>
                    </div>
                </th>
                <th></th>
                <th>
                    <div class="col_label ui-widget-content ui-widget-header border_w ui-state-default _ui-corner-all ui-state-highlight_ ui-corner-all_">
                        <div class="column_title">
                            <span>Available Users</span>
                        </div>
                    </div>
                </th>
                {% endwith %}
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="ui-widget-content_ _ui-corner-all user_content" valign="top">

                    <div class="body">
                        <form action="/admin/update_member" method="post" id="id_remove_member_{{ project.key.id }}">
                            <input type="hidden" name="id_project" value="{{ project.key.id }}">
                            <input type="hidden" name="status" value="not collaborator">
                            <ol id="id_assigned_users_{{project.key.id}}">
                                {% for member in project.get_members %}
                                <li>
                                    <input type="checkbox" name="member" value="{{ member.key.id }}" >{{ member.user.nickname }}
                                </li>
                                {% endfor %}
                            </ol>
                        </form>
                    </div>
                </td>
                <td class="ui-widget-content_ _ui-corner-all" valign="center" align="center">
                    <div>
                        <div>
                            <button type="button" id="id_move_left_{{project.key.id}}" val="{{project.key.id}}" class="left"><span>Left</span></button>
                        </div>
                        <div>
                            <button type="button" id="id_move_right_{{project.key.id}}" val="{{project.key.id}}" class="right"><span>Right</span></button>
                        </div>
                    </div>
                </td>
                <td class="ui-widget-content_ _ui-corner-all user_content" valign="top">
                    <div class="body">
                        <form action="/admin/update_member" method="post" id="id_add_member_{{ project.key.id }}">
                            <input type="hidden" name="id_project" value="{{ project.key.id }}">
                            <input type="hidden" name="status" value="collaborator">
                            <ol id="id_available_users_{{project.key.id}}">
                                {% for member in project.get_members_not_assigned %}
                                <li>
                                    <input type="checkbox" name="member" value="{{ member.key.id }}" >{{ member.user.nickname }}
                                </li>
                                {% endfor %}
                            </ol>
                        </form>
                    </div>
                </td>

            </tr>

        </tbody>
    </table>
    {% endfor %}
</div>

<div id="dialog_project_form" class="form_container tmp_dialog" title="Create new Project">
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $(function() {
            $( "input:button, button").button();
        });
        $(function() {
            $("button.left" ).button({
                icons: {
                    primary: "ui-icon-circle-triangle-w"
                },
                text: false
            });
        });
        $(function() {
            $("button.right" ).button({
                icons: {
                    primary: "ui-icon-circle-triangle-e"
                },
                text: false
            });
        });

        $( 'button:[id^=id_move_left_]' ).click(function() {
            var id_project = $( this ).attr('val');
            $( '#id_add_member_' + id_project ).submit();
        });
        $('form:[id^=id_add_member_]').submit(function(event) {
            event.preventDefault();
            var $form = $( this ),
            url = $form.attr('action'),
            id_project = $form.find( 'input[name="id_project"]' ).val(),
            data = $form.serialize();
            $.ajax({
                type: 'POST',
                url: url,
                dataType: 'json',
                data: data,
                success: function(data) {
                    var html = $(data.html).html();
                    $('#id_assigned_users_' + id_project).append(html);
                    $("input[name^='member']:checked:enabled",'#id_available_users_' + id_project).parent().remove();
                }
            });
        });

        $( 'button:[id^=id_move_right_]' ).click(function() {
            var id_project = $( this ).attr('val');
            $( '#id_remove_member_' + id_project ).submit();
        });
        $('form:[id^=id_remove_member_]').submit(function(event) {
            event.preventDefault();
            var $form = $( this ),
            url = $form.attr('action'),
            id_project = $form.find( 'input[name="id_project"]' ).val(),
            data = $form.serialize();
            $.ajax({
                type: 'POST',
                url: url,
                dataType: 'json',
                data: data,
                success: function(data) {
                    var html = $(data.html).html();
                    $('#id_available_users_' + id_project).append(html);
                    $("input[name^='member']:checked:enabled",'#id_assigned_users_' + id_project).parent().remove();
                }
            });
        });

        $(".joint").click(function() {
            var member_id = this.name;
            $.ajax({
                type: 'POST',
                url: '/admin/update_member',
                data: { member_id: member_id, status_val: $("#status_"  + member_id).val()},
                success: function(data) {
                    $("#status_row_" + member_id).text(data);
                }
            });
        });
        $("form button[type=button]").click(function() {
            var val = $( this ).attr('val');
            var $form = $( this ).parent().parent();
            $form.find( 'input[name="status"]' ).val(val);
            $form.submit();
        });

        $('form:[id^=id_member_update_form_]').submit(function(event) {
            event.preventDefault();
            var $form = $( this ),
            url = $form.attr('action'),
            id_member = $form.find( 'input[name="id_member"]' ).val(),
            data = $form.serialize();
            $.ajax({
                type: 'POST',
                url: url,
                dataType: 'json',
                data: data,
                success: function(data) {
                    $( '#label_status_' + id_member ).text(data.status);
                }
            });
        });

        $( "#dialog_project_form" ).dialog({
            autoOpen: false,
            height: 300,
            width: 600,
            modal: true,
            buttons: {
                "Save": function() {
                    var $form = $('#dialog_project_form form'),
                    url = $form.attr('action'),
                    data = $form.serialize();
                    $.ajax({
                        type: 'POST',
                        url: url,
                        dataType: 'json',
                        data: data,
                        success: function(data) {
                            if (data.result == 'ok') {
                                var html = $(data.html).html();
                                $( '#id_project_table' ).append(html);
                                $( "#dialog_project_form" ).dialog( "close" );
                            } else {
                                var html = $(data.html).html();
                                $( '#dialog_project_form' ).empty();
                                $( '#dialog_project_form' ).append(html);
                            }
                        },
                        error: function (data) {
                            showErrorMsg(data);
                        }
                    });
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                $( '#dialog_project_form' ).empty();
            }
        });
        $( "#id_add_project" ).click(function() {
            $.ajax({
                type: 'GET',
                url: '/admin/project_form',
                dataType: 'json',
                data: {},
                success: function(data) {
                     var html = $(data).html();
                     $( '#dialog_project_form' ).append(html);
                },
                error: function (data) {
                    showErrorMsg(data.responseText);
                }
            });
            $( "#dialog_project_form" ).dialog( "open" );
        });

    });
</script>

{% endblock %}